/**
 * create by young (young2f@outlook.com) on 2020/9/16
 * 选择辅料
 */


'use strict';
import React from 'react';
import {AutoComplete, Button, Form, Input, InputNumber, notification, Table} from 'antd';

import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';
import DescGroup from "../../../components/DescriptionGroup";
import ViewTitle from "../../../components/ViewTitle";
import {FormField, FormLayout, ModalFooter, SearchForm} from "antd-extra";
import notify from "../../../components/NotificationExtra";

moment.locale('zh-cn');
const table = 'ProcureOrder';
@Form.create()
@connect(({user, global, dynamicLabel, material, store}) => ({...user, ...material, ...dynamicLabel, ...global, ...store}))
export default class ModalSelectContacts extends FormBase {
  constructor(props) {
    super(props);
    this.state = {tagColor: undefined, selectedRowKeys: []};
  }

  componentDidMount() {

  }

  renderFoot = () => {
    const {foot, value, callback, modalRef, type = "radio", isPrice, form, contacts = []} = this.props;
    const {selectedRowKeys} = this.state;
    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            if (!selectedRowKeys.length) {
            //  notify({type: 'error', message: '未选择联系方式！'});
              modalRef.close();
              return;
            }
            const selected = [];
            for (let code of selectedRowKeys) {
              const device = _.find(contacts, item => {
                return item.code === code;
              });
              selected.push(device);
            }

              type === 'radio' ? callback(selected[0]) : callback(selected);
              modalRef.close();


          }}>确定</Button>
          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };
  onSelectChange = selectedRowKeys => {
    this.setState({selectedRowKeys});
  };
  columns = () => {

    let temp = [
      {
        title: '联系人',
        dataIndex: 'contacts',
        key: 'contacts',
      },
      {
        title: '电话',
        dataIndex: 'contactsPhone',
        key: 'contactsPhone',
      },
      {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
      },

    ];

    return temp;
  };

  render() {
    const {contacts,style} = this.props;
    const {selectedRowKeys, current = 1, loading, total = 0} = this.state;
    // const {form, selectedDevices, type = 'checkbox'} = this.props;
    const {form, selectedDevices, type = 'radio'} = this.props;

    const rowSelection = {
      type,
      selectedRowKeys,
      onChange: this.onSelectChange,
      getCheckboxProps: record => ({
        disabled: _.find(selectedDevices, item => {
          console.log(item.code, "disabled", record.code);
          return item.code === record.code;
        })
      })
    };
    const onSelectRow = (record) => {
      const {code} = record;
      const temp = _.find(selectedRowKeys, item => {
        return item === code;
      });
      if (temp) {
        _.remove(selectedRowKeys, item => item === code);
      } else if (type === 'radio') {
        selectedRowKeys.length = 0;
        selectedRowKeys.push(record.code);
      } else {
        selectedRowKeys.push(record.code);
      }
      this.onSelectChange(selectedRowKeys);
    };

    return (
      <div style={{...style}}>

        <Table
          className={'antTable'}
          bordered
          rowSelection={rowSelection}
          loading={loading}
          rowKey={record => record.code}
          columns={this.columns()}
          type={type}
          dataSource={contacts}
          onRow={(record) => ({
            onClick: () => onSelectRow(record)
          })}
          pagination={{
            current: current,
            total: total,
            showSizeChanger: true,
            onChange: page => {
              // this.setState({current:page})
              this.state.current = page;
              this.componentDidMount();
            },
            onShowSizeChange: (current, pageSize) => {
              this.state.current = 1;
              this.state.pageSize = pageSize;
              this.componentDidMount();
            }
          }}
        >
        </Table>

        {this.renderFoot()}
      </div>

    );
  }
}

